<template>
    <div>
        <van-nav-bar>
            <template #left>
                <div class="logo"></div>
            </template>
            <template #right>
                <van-button router to="/search" icon="search" round>搜索</van-button>
            </template>
        </van-nav-bar>
        <van-tabs  v-model="active">
            <van-tab  v-for="item in channelList" :key="item.id" :title="item.name">
                <article-list :channel_id="item.id" />
            </van-tab>
        </van-tabs>
        <div class="icon" @click="channelshow = true">
            <van-icon name="wap-nav" size="30" />
        </div>
        <!-- @input="active = $event" 和 :value="active" 可以用v-model="active"代替 因为v-model是语法糖 包含了@input以及：value语法-->
        <van-action-sheet v-model="channelshow" title="频道管理">
            <cannelEdit :channelList="channelList" :allList="allList"
                @del="channelList = channelList.filter(v => v.id != $event.id)" v-model="active"
                @add="channelList.push($event)" @update:channelshow="channelshow = $event" />
        </van-action-sheet>
    </div>
</template>

<script>
import ArticleList from './ArticleList.vue'
import { channelAPI, AllListAPI, resetChannelAPI } from '@/api/channel'
import cannelEdit from './cannelEdit.vue'
export default {
  name: 'MyHome',

  components: {
    ArticleList,
    cannelEdit
  },
  data () {
    return {
      active: 0,
      channelList: [],
      channelshow: false,
      allList: [],
      isFirst: true
    }
  },
  async created () {
    const local = JSON.parse(localStorage.getItem('chanels95'))
    const token = this.$store.state.user.tokenObj.token
    if (token || !local) {
      const res1 = await channelAPI()
      this.channelList = res1.data.channels
    } else {
      this.channelList = local
    }
    const res2 = await AllListAPI()
    this.allList = res2.data.channels
  },
  watch: {
    async channelList () {
      if (this.isFirst) {
        this.isFirst = false
      }
      //   if (this.$store.state.user.tokenObj.token) {
      //     const channels = this.channelList.map((v, i) => {
      //       return {
      //         id: v.id,
      //         seq: i
      //       }
      //     })
      //     console.log(newchannel)
      //     await resetChannelAPI({
      //       channels
      //     })
      //   }
      if (this.$store.state.user.tokenObj.token) {
        // 登录了，发请求
        // 准备一个传递过去的对象数组
        const channels = this.channelList.map((v, i) => {
          return {
            id: v.id,
            seq: i
          }
        })
        await resetChannelAPI({
          channels
        })
      } else {
        localStorage.setItem('chanels95', JSON.stringify(this.channelList))
        console.log(2)
      }
    }
  }

}
</script>

<style lang="less" scoped>
.van-nav-bar {
    .logo {
        width: 120px;
        height: 100%;
        background: url(@/asster/logo.png) no-repeat center / contain;
    }

    .van-button {
        width: 100px;
        height: 30px;
        background-color: rgba(255, 255, 255, .2);
        border: none;

        .van-button__text,
        .van-icon-search {
            color: #fff;
        }
    }
}

.icon {
    position: absolute;
    right: 0;
    top: 52px;
    background: #fff;
}

::v-deep .van-tabs__wrap {
    padding-right: 20px;
}
</style>
